<template>
  <div class="search">
    <div class="search-box">
      <search-box @query="getquery" ref="searchBox"></search-box>
    </div>

      <suggest @clearn="clearn" v-show="query.length" :query="query"></suggest>

    <div v-show="!query.length" class="search-wrapper">
      <div class="shortcut">
        <div class="hot-key">
          <h1 class="title">热门搜索</h1>
          <ul>
            <li @click="hotkeySearch(item.k)" class="item" v-for="item in hotKey" :key="item.n">
              <span>{{item.k}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { shuffle } from '../../common/js/index.js'
import searchBox from '../base/search-box'
import suggest from '../suggest/suggest'
export default {
  data() {
    return {
      params: {
        _: 1552628945565,
        g_tk: 5381,
        uin: 0,
        format: 'json',
        inCharset: 'utf-8',
        outCharset: 'utf-8',
        notice: 0,
        platform: 'h5',
        needNewCode: 1
      },
      hotKey: {},
      query: ''
    }
  },
  components: {
    searchBox,
    suggest
  },
  created() {
    this.getHotKey()
  },
  methods: {
    clearn() {
      this.$refs.searchBox.clearn()
    },
    getHotKey() {
      this.axios
        .get('/api/splcloud/fcgi-bin/gethotkey.fcg?', {
          params: this.params
        })
        .then(res => {
          if (res.data.code == 0) {
            this.hotKey = shuffle(res.data.data.hotkey).slice(0, 10)
          }
        })
    },
    hotkeySearch(k) {
      this.$refs.searchBox.setquery(k)
    },
    getquery(query) {
      this.query = query
    }
  }
}
</script>

<style lang="scss" scoped>
.search {

  .search-box {
    padding: 0 20px;
  }
  .search-wrapper {
    .shortcut {
      .hot-key {
        padding: 0 20px;
        .title {
          height: 40px;
          line-height: 40px;
          color: rgba(255, 255, 255, 0.6);
          font-size: 14px;
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .item {
            height: 20px;
            padding: 0 10px;
            margin-bottom: 10px;
            border-radius: 10px;
            background-color: #333;
            span {
              text-align: center;
              line-height: 12px;
              font-size: 12px;
              color: rgba(255, 255, 255, 0.6);
            }
          }
        }
      }
    }
  }
}
</style>
